import React, { useContext, useState } from 'react';
import { Checkbox } from 'antd';
import type { GetProp } from 'antd';
import MaterialHeader from '@/components/Survey/Common/MaterialHeader';
import { gerCurrentStatus, gerStringStatus, gerStringStatusByCurrentStatus, gerTextStatus } from '@/utils';
import { observer } from 'mobx-react-lite';
import { StatusContext } from '@/views/MaterialsView/context';

// 使用observer包裹了组件，使得store的状态更新时，组件也会重新渲染
const MuSelect: React.FC = observer(() => {
  const { serialNum, status } = useContext(StatusContext);
  const [checkboxVal, setCheckboxVal] = useState([]);
  console.log('mobx-store', status);
  const computedState = {
    title: gerTextStatus(status.title),
    desc: gerTextStatus(status.desc),
    options: gerStringStatus(status.options),
    position: gerCurrentStatus(status.position),
    titleSize: gerStringStatusByCurrentStatus(status.titleSize),
    descSize: gerStringStatusByCurrentStatus(status.descSize),
    titleWeight: gerCurrentStatus(status.titleWeight),
    descWeight: gerCurrentStatus(status.descWeight),
    titleItalic: gerCurrentStatus(status.titleItalic),
    descItalic: gerCurrentStatus(status.descItalic),
    titleColor: gerTextStatus(status.titleColor),
    descColor: gerTextStatus(status.descColor)
  };

  const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = checkedValues => {
    console.log('checked = ', checkedValues);
    setCheckboxVal(checkedValues);
  };

  return (
    <div className={computedState.position === 1 ? 'text-center' : ''}>
      <MaterialHeader
        serialNum={serialNum}
        title={computedState.title}
        desc={computedState.desc}
        titleSize={computedState.titleSize}
        descSize={computedState.descSize}
        titleWeight={computedState.titleWeight}
        descWeight={computedState.descWeight}
        titleItalic={computedState.titleItalic}
        descItalic={computedState.descItalic}
        titleColor={computedState.titleColor}
        descColor={computedState.descColor}
      />
      <div className="Checkbox">
        <Checkbox.Group value={checkboxVal} onChange={onChange}>
          {computedState.options?.map((item, index) => (
            <Checkbox key={index} value={item}>
              {item}
            </Checkbox>
          ))}
        </Checkbox.Group>
      </div>
    </div>
  );
});
export default MuSelect;
